<div data-test-setting="coverImage" ...attributes>
    <GhUploader
        @extensions={{this.imageExtensions}}
        @onComplete={{this.imageUploaded}}
        as |uploader|
    >
    <div>
        <label class="gh-setting-title" for="publication-cover">Publication cover</label>
        <div class="gh-setting-desc mb3">An optional large background image for your site</div>
        {{#each uploader.errors as |error|}}
            <div class="gh-setting-error" data-test-error="coverImage">{{or error.context error.message}}</div>
        {{/each}}

        <div class="gh-setting-action gh-uploadbutton-container flex flex-column items-stretch">
            {{#if uploader.isUploading}}
                {{uploader.progressBar}}
            {{else if this.settings.coverImage}}
                <div class="gh-branding-image-container largeimg justify-start">
                    <input
                        id="publication-cover"
                        type="image"
                        class="blog-cover"
                        src="{{this.settings.coverImage}}"
                        {{on "click" uploader.triggerFileDialog}}
                        data-test-cover-img
                    >
                    <button type="button" class="gh-setting-action-largeimg-delete" {{on "click" (fn this.update null)}} data-test-delete-image="coverImage">
                        {{svg-jar "trash" class="w4 h4"}}
                    </button>
                </div>
            {{else}}
                <div class="self-start">
                    <button id="publication-cover" type="button" class="gh-btn gh-btn-white" {{on "click" uploader.triggerFileDialog}} data-test-image-upload-btn="coverImage">
                        <span>Upload cover</span>
                    </button>
                    <button type="button" class="gh-btn gh-btn-white w10" {{on "click" this.toggleUnsplashSelector}} aria-label="Select photo from Unsplash">
                        <span>{{svg-jar "unsplash" class="nudge-right--2 nudge-bottom--2"}}</span>
                    </button>
                </div>
            {{/if}}
            <div class="dn">
                <GhFileInput
                    @multiple={{false}}
                    @action={{uploader.setFiles}}
                    @accept={{this.imageMimeTypes}}
                    @onInsert={{uploader.registerFileInput}}
                    data-test-file-input="coverImage"
                />
            </div>
        </div>
    </div>
    </GhUploader>

    {{#if this.showUnsplashSelector}}
        <GhUnsplash
            @select={{this.setUnsplashImage}}
            @close={{this.toggleUnsplashSelector}}
        />
    {{/if}}
</div>